<template>
          <div class="home-grids">
            <div @click="$router.push('/directive/anchor')" class="home-grid">anchor</div>
<div @click="$router.push('/directive/drag')" class="home-grid">drag</div>
<div @click="$router.push('/directive/observe')" class="home-grid">observe</div>
<div @click="$router.push('/directive/prop')" class="home-grid">prop</div>
<div @click="$router.push('/directive/px')" class="home-grid">px</div>
<div @click="$router.push('/directive/resize')" class="home-grid">resize</div>
<div @click="$router.push('/directive/ripple')" class="home-grid">ripple</div>
<div @click="$router.push('/directive/scroll')" class="home-grid">scroll</div>
<div @click="$router.push('/directive/spy')" class="home-grid">spy</div>
<div @click="$router.push('/directive/upload')" class="home-grid">upload</div>
            <div @click="$router.push('/component/actionsheet')" class="home-grid">actionsheet</div>
<div @click="$router.push('/component/autocomplete')" class="home-grid">autocomplete</div>
<div @click="$router.push('/component/badge')" class="home-grid">badge</div>
<div @click="$router.push('/component/button')" class="home-grid">button</div>
<div @click="$router.push('/component/calendar')" class="home-grid">calendar</div>
<div @click="$router.push('/component/carousel')" class="home-grid">carousel</div>
<div @click="$router.push('/component/carousel-item')" class="home-grid">carousel-item</div>
<div @click="$router.push('/component/cell')" class="home-grid">cell</div>
<div @click="$router.push('/component/cell-group')" class="home-grid">cell-group</div>
<div @click="$router.push('/component/checkbox')" class="home-grid">checkbox</div>
<div @click="$router.push('/component/circle-progress')" class="home-grid">circle-progress</div>
<div @click="$router.push('/component/col')" class="home-grid">col</div>
<div @click="$router.push('/component/collapse')" class="home-grid">collapse</div>
<div @click="$router.push('/component/collapse-item')" class="home-grid">collapse-item</div>
<div @click="$router.push('/component/color-picker')" class="home-grid">color-picker</div>
<div @click="$router.push('/component/date-chooser')" class="home-grid">date-chooser</div>
<div @click="$router.push('/component/date-native-picker')" class="home-grid">date-native-picker</div>
<div @click="$router.push('/component/date-picker')" class="home-grid">date-picker</div>
<div @click="$router.push('/component/dialog')" class="home-grid">dialog</div>
<div @click="$router.push('/component/divider')" class="home-grid">divider</div>
<div @click="$router.push('/component/dropdown')" class="home-grid">dropdown</div>
<div @click="$router.push('/component/field')" class="home-grid">field</div>
<div @click="$router.push('/component/form')" class="home-grid">form</div>
<div @click="$router.push('/component/form-el')" class="home-grid">form-el</div>
<div @click="$router.push('/component/icon')" class="home-grid">icon</div>
<div @click="$router.push('/component/image')" class="home-grid">image</div>
<div @click="$router.push('/component/image-preview')" class="home-grid">image-preview</div>
<div @click="$router.push('/component/input')" class="home-grid">input</div>
<div @click="$router.push('/component/label')" class="home-grid">label</div>
<div @click="$router.push('/component/layer')" class="home-grid">layer</div>
<div @click="$router.push('/component/list')" class="home-grid">list</div>
<div @click="$router.push('/component/loading')" class="home-grid">loading</div>
<div @click="$router.push('/component/loading-bar')" class="home-grid">loading-bar</div>
<div @click="$router.push('/component/modal')" class="home-grid">modal</div>
<div @click="$router.push('/component/msgbox')" class="home-grid">msgbox</div>
<div @click="$router.push('/component/navbar')" class="home-grid">navbar</div>
<div @click="$router.push('/component/notify')" class="home-grid">notify</div>
<div @click="$router.push('/component/number-keyboard')" class="home-grid">number-keyboard</div>
<div @click="$router.push('/component/overlay')" class="home-grid">overlay</div>
<div @click="$router.push('/component/page')" class="home-grid">page</div>
<div @click="$router.push('/component/picker')" class="home-grid">picker</div>
<div @click="$router.push('/component/popup')" class="home-grid">popup</div>
<div @click="$router.push('/component/progress')" class="home-grid">progress</div>
<div @click="$router.push('/component/pull-refresh')" class="home-grid">pull-refresh</div>
<div @click="$router.push('/component/radio')" class="home-grid">radio</div>
<div @click="$router.push('/component/rich-image')" class="home-grid">rich-image</div>
<div @click="$router.push('/component/roll')" class="home-grid">roll</div>
<div @click="$router.push('/component/row')" class="home-grid">row</div>
<div @click="$router.push('/component/search')" class="home-grid">search</div>
<div @click="$router.push('/component/select')" class="home-grid">select</div>
<div @click="$router.push('/component/sign')" class="home-grid">sign</div>
<div @click="$router.push('/component/skeleton')" class="home-grid">skeleton</div>
<div @click="$router.push('/component/slider')" class="home-grid">slider</div>
<div @click="$router.push('/component/step')" class="home-grid">step</div>
<div @click="$router.push('/component/stepper')" class="home-grid">stepper</div>
<div @click="$router.push('/component/steps')" class="home-grid">steps</div>
<div @click="$router.push('/component/swipe-cell')" class="home-grid">swipe-cell</div>
<div @click="$router.push('/component/switch')" class="home-grid">switch</div>
<div @click="$router.push('/component/tab')" class="home-grid">tab</div>
<div @click="$router.push('/component/tabbar')" class="home-grid">tabbar</div>
<div @click="$router.push('/component/table')" class="home-grid">table</div>
<div @click="$router.push('/component/tabs')" class="home-grid">tabs</div>
<div @click="$router.push('/component/toast')" class="home-grid">toast</div>
<div @click="$router.push('/component/tooltip')" class="home-grid">tooltip</div>
<div @click="$router.push('/component/transition-slide')" class="home-grid">transition-slide</div>
<div @click="$router.push('/component/triangle')" class="home-grid">triangle</div>
          </div>
        </template>
        <script setup lang="ts"></script>
        <style lang="less" scoped>
          .home-grids {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 0.2rem;
            row-gap: 0.2rem;
            padding:0.2rem;

            .home-grid {
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 0.4rem;
              font-size: 0.3rem;
              font-weight: bold;
              border: 1px solid #ddd;
              border-radius: 0.08rem;
              transition: all 300ms;

              &:hover {
                cursor: pointer;
                color: #03a8f3;
                border-color: #03a8f3;
              }

              &:active {
                background: #c3ebff;
              }
	          }

            @media (min-width: 750px) {
              grid-template-columns: repeat(4, 1fr);
            }

            @media (min-width: 1280px) {
              grid-template-columns: repeat(6, 1fr);
            }

            @media (min-width: 1600px) {
              grid-template-columns: repeat(9, 1fr);
            }

            @media (min-width: 1920px) {
              grid-template-columns: repeat(12, 1fr);
            }
          }
        </style>